<template>
    <div class='page'>
        <headBack :title="title"></headBack>
        <view class="headBottom">
            <view class="box2">
                <view class="evan-form-show">
                    <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                        <evan-form-item label="姓名" prop="name">
                            <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.name" placeholder="请输入姓名" />
                        </evan-form-item>
                        <evan-form-item label="年龄" prop="age">
                            <input class="form-input" type="number" placeholder-class="form-input-placeholder" v-model="form.age" @input="handNum"
                                placeholder="请输入年龄" />
                        </evan-form-item>
                        <evan-form-item label="与当前用户关系" prop="with">
                            <picker mode="selector" :value="form.with" :range="withList" :range-key="'dictLabel'" @change="withChange">
                                <view v-if="!form.with" class="uni-input gray">请选择
                                    <uni-icons style="margin-right:30rpx;" type="arrowdown" color="#2e996f" size="24" />
                                </view>
                                <view v-else class="uni-input">
                                    {{form.withName}}
                                    <uni-icons style="margin-right:30rpx;" type="arrowdown" color="#2e996f" size="24" />
                                </view>
                            </picker>
                        </evan-form-item>
                        <evan-form-item label="联系方式" prop="contact">
                            <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.contact" placeholder="请输入联系方式" />
                        </evan-form-item>
                        <evan-form-item label="地址" prop="address" class="address">
                            <pickerAddress @change="change">
                                <span :class="{'gray':!form.address}">{{form.address?form.address:"请选择省市区"}}</span>
                            </pickerAddress>
                            <uni-icons style="margin-right:30rpx;" type="arrowdown" color="#2e996f" size="24" />
                        </evan-form-item>
                        <evan-form-item label="详细地址" prop="addres_detailed">
                            <!-- <textarea v-model="form.addres_detailed" placeholder="请输入详细地址"></textarea> -->
                        </evan-form-item>
                        <view class="feedback-data">
                            <view class="content">
                                <textarea v-model="form.addres_detailed" placeholder="请输入详细地址"></textarea>
                            </view>
                        </view>
                    </evan-form>
                </view>
            </view>
            <view class="btn">
                <view class="padding flex flex-direction">
                    <button :disabled="disabled" @click="submit()" class="cu-btn bg-blue margin-tb-sm lg">提交</button>
                </view>
            </view>
        </view>
    </div>
</template>
<script>
import {
    setContact
} from "@/api/my/contact.js"
import {
    relationship
} from "@/api/dictionary.js"
export default {
    name: '',
    components: {

    },
    data() {
        return {
            loading: false,
            disabled: false,
            hideRequiredAsterisk: false,
            form: {
                name: null,
                age: null,
                contact: null,
                withName: null,
                address: null,
            },
            rules: {
                name: {
                    required: true,
                    message: '请输入姓名'
                },
                age: {
                    required: true,
                    message: '请输入年龄'
                },
                contact: [{
                    required: true,
                    message: '请输入联系方式'
                },
                {
                    validator: this.isMobilePhone
                }
                ],
                withName: {
                    required: true,
                    message: '请选择与当前用户关系'
                },
                address: {
                    required: true,
                    message: '请选择地址'
                },
                addres_detailed: {
                    required: true,
                    message: '请输入详细地址'
                },
            },
            withList: relationship,
            title: '新增紧急联系人',
        }
    },
    onShow() {

    },
    onLoad(query) {
        if (query.data) {
            this.title = '编辑紧急联系人'
            let data = JSON.parse(decodeURIComponent(query.data))
            this.form = {
                ...this.form,
                ...data
            }
            this.form.withName = this.selectDictLabel(this.withList, data.with)
            this.form.address = data.addres_province + "," + data.addres_city + "," + data.addres_area
        }
    },
    mounted() {
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        isMobilePhone(rule, value, callback) {
            let chPhonePattern = /^1(3|4|5|6|7|8|9)\d{9}$/
            if (chPhonePattern.test(value) === false) {
                callback(new Error('手机号格式不正确'));
            } else {
                callback();
            }
        },
        change(data) {
            console.log(data.data, 12333)
            this.form.address = data.data.join(',')
            this.form.addres_province = data.data[0]
            this.form.addres_city = data.data[1]
            this.form.addres_area = data.data[2]
        },
        handNum(e) {
            const v = e.detail.value
            this.form.age = '1'
            const zero = /^(0{2,})|[^0-9]/g
            let final = 0
            if (!v) {
                final = ''
            } else {
                final = v.toString().replace(zero, (v) => {
                    return ''
                })

                if (final.split('')[0] * 1 === 0) {
                    final = final.slice(1) - 0 || ''
                }
            }
            this.$nextTick(() => {
                this.form.age = final.toString() || ''
            })
        },
        withChange(e) {
            this.form.withName = this.withList[e.detail.value].dictLabel
            this.form.with = this.withList[e.detail.value].dictValue
        },
        // 提交
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    if (this.form.id) {
                        this.form.contact_id = this.form.id
                    }
                    setContact(this.form).then((res) => {
                        if (res.code == 1) {
                            this.$message("操作成功")
                            setTimeout(() => {
                                uni.navigateTo({
                                    url: '/pagesA/my/contact'
                                })
                            }, 1000)
                        }
                    })
                }
            })
        },
    },
}
</script>
<style scoped lang='scss'>
.box2 {
  width: 100vw;
  background-color: #fff;
  padding-bottom: 20rpx;

  .evan-form-show {
    padding: 0 30rpx;
    background-color: #fff;

    .form-input {
      font-size: 28rpx;
      color: #333;
      // text-align: right;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
      height: 60rpx;
      line-height: 45rpx;
      //   text-indent: 36rpx;
      padding-left: 36rpx;

      &.textarea {
        height: 240rpx;
        padding: 24rpx 0;
        text-align: left;
      }
    }

    .form-input-placeholder {
      font-size: 28rpx;
      color: #999;
    }

    &__button {
      width: 100%;
      height: 88rpx;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 36rpx;
      color: #fff;
      margin-top: 20rpx;
      background-color: #2d87d5;

      &::before,
      &::after {
        border: none;
      }
    }

    .customize-form-item {
      &__label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
      }

      &__radio {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        &__text {
          font-size: 28rpx;
          color: #333;
        }
      }
    }

    .gray {
      color: #999;
    }

    .feedback-data {
      // height: 600rpx;
      margin: 20rpx auto;
      background-color: #ffffff;
      border-radius: 20rpx;

      .content {
        padding: 20rpx;

        textarea {
          width: 100%;
          height: 320rpx;
          background-color: #f6f6f6;
          border-radius: 20rpx;
          padding: 20rpx;
          font-size: 26rpx;
          color: #222222;
        }
      }

      .voucher-img {
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        height: 240rpx;
        margin-top: 20rpx;

        .list {
          width: 33%;
          height: 100%;

          image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  /deep/uni-picker {
    flex: 1;
    text-align: left;
    line-height: 45rpx;
    text-indent: 36rpx;

    .uni-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .gray {
      color: #999;
    }
  }

  /deep/.evan-form-item-container__label {
    font-size: 28rpx;
    color: #333333;
    min-width: 140rpx;
    text-align: justify;
    text-align-last: justify;
    /* #ifdef MP-WEIXIN */
    width: 140rpx;
    /* #endif */
  }
}

/deep/.evan-form-item-container {
  border-bottom: 0 !important;
}

/* #ifdef MP-WEIXIN */
picker {
  flex: 1;
  text-align: left;
  line-height: 45rpx;
  padding-left: 36rpx;

  .uni-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gray {
    color: #999;
  }
}

.address {
  /deep/.evan-form-item-container__main {
    padding-left: 36rpx;
    display: flex;
    justify-content: space-between;
  }

  /deep/ picker-address {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
  }
}

/* #endif */
.btn {
  button {
    background-image: linear-gradient(0deg, #4199b2 0%, #2d996b 100%),
      linear-gradient(#ff6a00, #ff6a00);
    background-blend-mode: normal, normal;
  }
}
</style>